{include file="common/head"/}
<style>
    .layui-table-cell{height: auto;}
    .layui-table-cell ul li a{color: #1C8FEF;display: block;border: 1px solid #ececec;padding: 3px 8px;}
    .layui-table-cell ul li a:hover{color: #005580}
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>设备状态</legend>
    </fieldset>

    <div class="layui-inline" style="float: right">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-bottom: 0px">
                <div class="layui-inline" style="margin-right: 0px">
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="keyword" name="keyword" autocomplete="off"placeholder="请输入设备名称"class="layui-input">
                    </div>
                </div>

                <div class="layui-inline" style="margin-right: 0px">
                    <div class="layui-btn-group layui-inline" style="margin: 0px">
                        <a  href="{:url('brakeMachine')}" class="layui-btn layui-btn-primary">重置</a>
                        <button id="search" class="layui-btn layui-btn-normal" type="button" lay-submit lay-filter="formDemo" style="background-color: #009688;">
                            <i class="layui-icon">&#xe615;</i>查找
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    <table class="layui-table" id="list" lay-filter="list"></table>
</div>
<script type="text/html" id="report_status">
    {{# if(d.report_status==1){ }}
    <span>正常</span>
    {{# }else{ }}
    <span style="color: red">掉线</span>
    {{# } }}
</script>
<script type="text/html" id="online_status">
    {{# if(d.online_status==1){ }}
    <span>正常</span>
    {{# }else{ }}
    <span style="color: red">掉线</span>
    {{# } }}
</script>

{include file="common/foot"/}
<script>
    layui.use('table', function() {
        var table = layui.table, $ = layui.jquery;var form = layui.form;
        var tableIn = table.render({
            id: 'device',
            elem: '#list',
            url: "{:url('statusList')}",
            method: 'post',
            page: true,
            even:true,
            cols: [[
                {field: 'screen_name',title: '屏显名称', width: 130},
                {field: 'report_status', align: 'center',title: '屏显状态', width: 130,templet:"#report_status"},
                {field: 'report_time',title: '屏显更新时间', width: 130},
                {field: 'device_name',title: '摄像机名称', width: 130},
                {field: 'online_status', align: 'center',title: '摄像机状态', width: 130,templet:"#online_status"},
                {field: 'drop_time',title: '摄像机更新时间', width: 130},
                {field: 'location', title: '设备位置', width: 100}
            ]],
            limit: 10 //每页默认显示的数量
        });
        $('#search').on('click', function () {

            var keyword = $('#keyword').val();
            console.log(keyword);
            if ($.trim(keyword) === '') {
                layer.msg('{:lang("pleaseEnter")}查找信息！', {icon: 0});
                return;
            }
            //表格重载
            tableIn.reload({
                //传递额外参数
                where: {keyword: keyword}
            });
        });
    });
</script>
</body>
</html>